<template>
  <div class="container layout">
    <Sidebar></Sidebar>
    <div class="content">
      <div class="index">
        <router-link to="/homepage">全部文件</router-link>&nbsp;
        <span>></span>&nbsp;
        {{category}}
      </div>
      <div class="file_list" ref="fileList">
        <ul>
          <li v-for="item in mountData">
            <div class="con">
              <div class="file_img"></div>
              <div class="right_dec">
                <router-link to="/docs/preview">
                  <h3 class="file_title">
                    我的应用数据
                  </h3>
                  <div class="clearfix file_desc">
                    <p class="file_time fl file_p">2017-10-30 15:00</p>
                    <p class="file_size fr file_p">1.6M</p>
                  </div>
                </router-link>
              </div>
              <div class="pulldown" @click="pulldown($event)"></div>
              <div class="file_sel clearfix">
                <div class="file_download fl font_s">
                  <b></b>
                  下载
                </div>
                <div class="file_del fr font_s">
                  <b></b>
                  删除
                </div>
              </div>
            </div>
          </li>
          <li class="no_more_data" ref="noMore">
            <p>加载完毕，没有更多了~</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  import Sidebar from '../subComponents/sidebar.vue'

//  import $ from 'jquery'

  // 引入公共方法
  import { pullDown, lazyLoad, nomoreData } from '../../common'

  // 引入图片路径
  import docUrl from '../../assets/images/docslist/doc.png'
  import pdfUrl from '../../assets/images/docslist/pdf.png'
  import pptxUrl from '../../assets/images/docslist/pptx.png'
  import rarUrl from '../../assets/images/docslist/rar.png'
  import txtUrl from '../../assets/images/docslist/txt.png'
  import xlsxUrl from '../../assets/images/docslist/xlsx.png'
  import zipUrl from '../../assets/images/docslist/zip.png'
  import unknowUrl from '../../assets/images/docslist/unknow.png'

  export default {
    data () {
      return {
        category: this.$route.query.category,
        imgUrl: {
          doc: `url(${docUrl}) no-repeat`,
          pdf: `url(${pdfUrl}) no-repeat`,
          pptx: `url(${pptxUrl}) no-repeat`,
          rar: `url(${rarUrl}) no-repeat`,
          txt: `url(${txtUrl}) no-repeat`,
          xlsx: `url(${xlsxUrl}) no-repeat`,
          zip: `url(${zipUrl}) no-repeat`,
          unknowUrl: `url(${unknowUrl}) no-repeat`
        },
        falseData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21],
        mountData: [], // 实际渲染的数据
        noMoreData: false
      }
    },
    components: {
      Sidebar: Sidebar
    },
    methods: {
      pulldown (e) {
        pullDown(e, this)
      }
    },
    created () {
      lazyLoad(this.falseData, this.mountData, this)
    },
    mounted () {
      nomoreData(this)
    }
  }
</script>
<style scoped>
  .content .index {
    width: 100%;
    height: 1.2rem;
    line-height: 1.2rem;
    padding: 0 0.26rem;
    font-size: 0.32rem;
    color: rgba(51, 51, 51, .7);
  }

  .content .index a {
    color: rgba(94, 136, 255, .7);
  }

  .file_list ul {
    width: 100%;
  }

  .file_list ul li {
    height: 1.4rem;
    overflow: hidden;
    padding: 0 0.26rem;
  }

  .file_list ul .no_more_data {
    height: 0;
    background-color: #f4f4f4;
  }

  .file_list ul .no_more_data p {
    line-height: 1.4rem;
  }

  .file_list ul li .con:first-of-type {
    border-top: 1px solid #e7e7e7;
  }

  .file_list ul li .con {
    width: 100%;
    height: 100%;
    border-bottom: 0.01rem solid #e7e7e7;
    position: relative;
    padding: 0.1rem 0;
  }

  .file_list ul li .file_img {
    width: 1.2rem;
    height: 1.2rem;
    background: url('../../assets/images/docslist/txt.png');
    background-size: 100% 100%;
    position: absolute;
    top: 0.1rem;
    left: 0;
    z-index: 999;
  }

  .file_list ul li .right_dec {
    width: 100%;
    height: 1.2rem;
    padding: 0.2rem 0.64rem 0 1.5rem;
  }

  .file_list ul li .right_dec .file_desc {
    padding: 0.1rem 0.3rem 0 0;
  }

  .file_list ul li .right_dec .file_title {
    font-size: 0.32rem;
    color: #333;
    line-height: 0.5rem;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .file_list ul li .right_dec .file_p {
    font-size: 0.24rem;
    color: #ccc;
    line-height: 0.3rem;
  }

  .file_list ul li .file_sel {
    position: absolute;
    left: -0.28rem;
    top: 1.4rem;
    width: 7.5rem;
    height: 1.4rem;
    background-color: #fff;
    padding: 0 2.7rem;
  }

  .file_list ul li .file_sel .font_s {
    font-size: 0.2rem;
    color: #666;
    line-height: 0.4rem;
    text-align: center;
  }

  .file_list ul li .file_sel .file_del b {
    display: block;
    width: 0.36rem;
    height: 0.39rem;
    margin: 0.4rem auto 0;
    background: url('../../assets/images/sprite.png') no-repeat -1.77rem -1.54rem;
    background-size: 10rem 6rem;
  }

  .file_list ul li .file_sel .file_download b {
    width: 0.46rem;
    height: 0.39rem;
    margin: 0.4rem 0 0 0;
    background: url('../../assets/images/sprite.png') no-repeat -2.43rem -1.51rem;
    background-size: 10rem 6rem;
    display: block;
  }
</style>
